<template>
  <div>
    <div class="bg">
      <div class="user-box">
        <div class="user-left">
          <div class="user-left-top">
            <div class="header">
              <img :src="logo" alt="" class="header-img" />
              <div class="title">
                <div class="name">
                  <p>蓝莓派</p>
                  <img :src="mam" alt="" />
                </div>
                <div class="Email">874513568@qq.com</div>
              </div>
            </div>
            <div>
              <p>他的签名还在漂游呢~</p>
              <div class="compile">
                <img :src="bi" alt="" />
                编辑
              </div>
            </div>
            <ul>
              <router-link
                v-for="(item, index) in arr"
                :key="index"
                :to="item.site"
              >
                <li
                  :class="['list', { active: currindex === item.id }]"
                  @click="currindexHandle(item.id)"
                >
                  <p>{{ item.num }}</p>
                  <p>{{ item.title }}</p>
                </li>
              </router-link>
            </ul>
          </div>
          <div class="user-left-bottom">
            <ul>
              <router-link
                v-for="(item, index) in navArr"
                :key="index"
                :to="item.site"
              >
                <li
                  @click="currindexHandle(item.id)"
                  :class="{ active: currindex === item.id }"
                >
                  <span class="iconfont" v-html="item.img">{{ item.img }}</span>
                  {{ item.title }}
                </li>
              </router-link>
            </ul>
          </div>
        </div>
        <div class="user-right">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currindex: "1001",
      logo: "http://iwenwiki.com/api/blueberrypai/images/p_03.png",
      mam: "http://iwenwiki.com/api/blueberrypai/images/pp_06.png",
      bi: "http://iwenwiki.com/api/blueberrypai/images/p_11.png",
      arr: [
        {
          id: 1001,
          num: 22,
          title: "帖子",
          site: "/userinvitation",
        },
        {
          id: 1002,
          num: 21,
          title: "关注",
          site: "/userattention",
        },
        {
          id: 1003,
          num: 22,
          title: "被关注",
          site: "/useronattention",
        },
      ],
      navArr: [
        {
          id: 1004,
          title: "编辑个人资料",
          img: "&#xe507;",
          site: "/setpersonaldata",
        },
        {
          id: 1005,
          title: "消息中心",
          img: "&#xe685;",
          site: "/usermsg",
        },
        {
          id: 1006,
          title: "我的收藏",
          img: "&#xe611;",
          site: "/userenshrine",
        },
        {
          id: 1007,
          title: "我的评论",
          img: "&#xe711;",
          site: "/usercommunity",
        },
        {
          id: 1008,
          title: "我的小组",
          img: "&#xe63f;",
          site: "/usergroup",
        },
      ],
    };
  },
  methods: {
    currindexHandle(index) {
      this.currindex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background: #f5f5f5;
  overflow: hidden;
  padding-bottom: 30px;
  .user-box {
    width: 1200px;
    margin: 30px auto;
    .user-left {
      float: left;
      width: 300px;
      margin-right: 30px;
      height: 780px;
      background: #fff;
      border-radius: 5px;
      .user-left-top {
        padding: 50px 20px;
        overflow: hidden;
        .header {
          overflow: hidden;
          margin-bottom: 30px;
        }
        .header-img {
          float: left;
        }
        .title {
          float: left;
          margin: 20px 0 0 20px;
          .name {
            float: left;
            margin-bottom: 5px;
          }
          p {
            float: left;
            margin-right: 10px;
          }
          img {
            float: left;
            margin-top: 2px;
          }
          .Email {
            color: #999;
            font-size: 14px;
          }
        }
        .compile {
          color: rgb(2, 162, 255);
          margin: 10px 0 50px;
          cursor: pointer;
          img {
            margin-right: 5px;
          }
        }
        .list {
          border-top: 1px solid #f5f5f5;
          background: #f5f5f5;
          width: 76px;
          height: 75px;
          float: left;
          margin-right: 10px;
          color: #000;
          p {
            margin-top: 10px;
          }
        }
        .active {
          background: rgb(2, 162, 255);
          color: #fff;
        }
      }
      .user-left-bottom {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        li {
          height: 60px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          line-height: 60px;
          text-align: left;
          color: #999;
          span {
            margin: 0 20px 0 65px;
          }
        }
        .active {
          background: rgb(2, 162, 255);
          color: #fff;
        }
      }
    }
    .user-right {
      float: left;
      background: #fff;
      height: 780px;
      width: 870px;
      border-radius: 5px;
    }
  }
}
</style>